<template>
  <div class="menu-card" :style="{'margin-left': level * 15 + 'px'}">
    <el-card shadow="hover" class="mobile-card">
      <div class="mobile-card-header">
        <div class="card-title">
          <span class="name">{{ menu.name }}</span>
          <span class="menu-type" :class="menuTypeClass">{{ menuTypeText }}</span>
        </div>
        <div class="status-badge" :class="statusClass">
          {{ statusText }}
        </div>
      </div>
      
      <div class="mobile-card-info">
        <div v-if="menu.icon" class="info-item icon-item">
          <span class="info-label">图标：</span>
          <span class="info-value"><svg-icon :icon-class="menu.icon" /></span>
        </div>
        <div class="info-item">
          <span class="info-label">排序：</span>
          <span class="info-value">{{ menu.sort }}</span>
        </div>
        <div v-if="menu.component_path" class="info-item">
          <span class="info-label">组件路径：</span>
          <span class="info-value">{{ menu.component_path }}</span>
        </div>
      </div>
      
      <div v-if="expanded" class="mobile-card-detail">
        <div v-if="menu.perms" class="info-item">
          <span class="info-label">权限标识：</span>
          <span class="info-value">{{ menu.perms }}</span>
        </div>
        <div v-if="menu.web_path" class="info-item">
          <span class="info-label">路由地址：</span>
          <span class="info-value">{{ menu.web_path }}</span>
        </div>
        <div v-if="menu.interface_path" class="info-item">
          <span class="info-label">接口路径：</span>
          <span class="info-value">{{ menu.interface_path }}</span>
        </div>
        <div v-if="menu.interface_method" class="info-item">
          <span class="info-label">请求方法：</span>
          <span class="info-value">{{ menu.interface_method }}</span>
        </div>
        <div class="info-item">
          <span class="info-label">创建时间：</span>
          <span class="info-value">{{ formatTime(menu.create_time) }}</span>
        </div>
        <div class="info-item">
          <span class="info-label">更新时间：</span>
          <span class="info-value">{{ formatTime(menu.update_datetime) }}</span>
        </div>
      </div>
      
      <div class="mobile-card-actions">
        <div>
          <el-button type="text" @click="toggleExpand">
            {{ expanded ? '收起' : '详情' }}
          </el-button>
        </div>
        <div>
          <el-button type="text" icon="el-icon-edit" @click="handleUpdate" :style="{color: theme}"
            v-if="$parent.hasPermi(['permission:menus:{id}:put'])">修改</el-button>
          <el-button type="text" icon="el-icon-plus" @click="handleAdd" :style="{color: theme}"
            v-if="$parent.hasPermi(['permission:menus:post'])">新增</el-button>
          <el-button type="text" icon="el-icon-delete" @click="handleDelete" style="color: #F56C6C"
            v-if="$parent.hasPermi(['permission:menus:{id}:delete'])">删除</el-button>
        </div>
      </div>
    </el-card>
    
    <!-- 递归渲染子菜单 -->
    <div v-if="hasChildren && expanded" class="children-container">
      <menu-card 
        v-for="(item, index) in menu.children" 
        :key="index"
        :menu="item"
        :theme="theme"
        :level="level + 1"
        @update="childMenu => $emit('update', childMenu)"
        @add="childMenu => $emit('add', childMenu)"
        @delete="childMenu => $emit('delete', childMenu)"
      ></menu-card>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MenuCard',
  props: {
    menu: {
      type: Object,
      required: true
    },
    theme: {
      type: String,
      default: '#409EFF'
    },
    level: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      expanded: false
    }
  },
  computed: {
    hasChildren() {
      return this.menu.children && this.menu.children.length > 0;
    },
    statusText() {
      return this.menu.status === 1 ? '正常' : '停用';
    },
    statusClass() {
      return this.menu.status === 1 ? 'active' : 'inactive';
    },
    menuTypeText() {
      const typeMap = {
        '0': '目录',
        '1': '菜单',
        '2': '按钮'
      };
      return typeMap[this.menu.menuType] || '未知';
    },
    menuTypeClass() {
      const typeClassMap = {
        '0': 'directory',
        '1': 'menu',
        '2': 'button'
      };
      return typeClassMap[this.menu.menuType] || '';
    }
  },
  methods: {
    toggleExpand() {
      this.expanded = !this.expanded;
    },
    formatTime(time) {
      if (!time) return '未知';
      const date = new Date(time);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
    handleUpdate() {
      this.$emit('update', this.menu);
    },
    handleAdd() {
      this.$emit('add', this.menu);
    },
    handleDelete() {
      this.$emit('delete', this.menu);
    }
  }
}
</script>

<style lang="scss" scoped>
.menu-card {
  margin-bottom: 15px;
  
  .mobile-card {
    margin-bottom: 10px;
    border-radius: 8px;
    
    .mobile-card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
      
      .card-title {
        display: flex;
        align-items: center;
        
        .name {
          font-weight: bold;
          font-size: 16px;
          margin-right: 8px;
        }
        
        .menu-type {
          font-size: 12px;
          padding: 2px 6px;
          border-radius: 4px;
          
          &.directory {
            background-color: #ecf5ff;
            color: #409eff;
          }
          
          &.menu {
            background-color: #f0f9eb;
            color: #67c23a;
          }
          
          &.button {
            background-color: #f0f2f5;
            color: #909399;
          }
        }
      }
      
      .status-badge {
        font-size: 12px;
        padding: 2px 6px;
        border-radius: 4px;
        
        &.active {
          background-color: #f0f9eb;
          color: #67c23a;
        }
        
        &.inactive {
          background-color: #f4f4f5;
          color: #909399;
        }
      }
    }
    
    .mobile-card-info, .mobile-card-detail {
      .info-item {
        margin: 8px 0;
        font-size: 14px;
        display: flex;
        
        .info-label {
          color: #606266;
          margin-right: 5px;
          font-weight: bold;
        }
        
        .info-value {
          color: #303133;
        }
        
        &.icon-item {
          .info-value {
            display: flex;
            align-items: center;
          }
        }
      }
    }
    
    .mobile-card-actions {
      display: flex;
      justify-content: space-between;
      margin-top: 15px;
      border-top: 1px solid #ebeef5;
      padding-top: 10px;
    }
  }
  
  .children-container {
    margin-left: 10px;
    border-left: 1px dashed #dcdfe6;
    padding-left: 5px;
  }
}
</style> 